package icu.bughub.app.app.ui.screens

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.google.accompanist.insets.LocalWindowInsets
import com.google.accompanist.systemuicontroller.rememberSystemUiController
import icu.bughub.app.app.ui.components.ChartView
import icu.bughub.app.app.ui.components.CircleRing
import icu.bughub.app.app.ui.components.DailyTaskContent
import icu.bughub.app.app.viewmodel.TaskViewModel

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TaskScreen(viewModel: TaskViewModel = viewModel()) {

    //圆环高度
    val boxWidthDp: Int
    //获取屏幕大小
    with(LocalConfiguration.current) {
        boxWidthDp = screenWidthDp / 2
    }

    val systemUiController = rememberSystemUiController()

    //更新学年积分  当学年积分改变的时候重新计算百分比
    LaunchedEffect(key1 = viewModel.pointOfYear) {
        systemUiController.setStatusBarColor(
            color = Color.Transparent,
        )
        viewModel.updatePointPercent()
        viewModel.updateTips()
    }

    // 根据屏幕密度计算 statusBar 的高度
    val statusBarHeightDp = with(LocalDensity.current) {
        //statusBarHeight.toDp()
        LocalWindowInsets.current.statusBars.top.toDp()
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Brush.verticalGradient(listOf<Color>(Color(0xFF149EE7), Color.White))),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        //标题栏
        TopAppBar(
            title = {
                Text(
                    text = "学习任务",
                    modifier = Modifier.fillMaxWidth(),
                    color = Color.White,
                    textAlign = TextAlign.Center,
                    fontSize = 18.sp
                )
            }, colors = TopAppBarDefaults.topAppBarColors(
                containerColor = Color.Transparent,
                titleContentColor = Color.Transparent
            )
        )

        LazyColumn(horizontalAlignment = Alignment.CenterHorizontally) {
            //学习周期
            item {
                Text(
                    text = viewModel.taskDate,
                    fontSize = 12.sp,
                    color = Color.White,
                    textAlign = TextAlign.Center,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(8.dp)
                )
            }

            //学习进度
            item {
                Box(
                    contentAlignment = Alignment.Center,
                    modifier = Modifier
                        .height(boxWidthDp.dp)
                        .padding(top = 8.dp)
                ) {
                    //圆环
                    CircleRing(boxWidthDp = boxWidthDp, viewModel)

                    //进度数据
                    Column(
                        horizontalAlignment = Alignment.CenterHorizontally,
                    ) {
                        Text(
                            buildAnnotatedString {
                                withStyle(
                                    style = SpanStyle(
                                        fontSize = 36.sp,
                                        color = Color.White
                                    )
                                ) {
                                    append(viewModel.pointOfYear.toString())
                                }
                                withStyle(
                                    style = SpanStyle(
                                        fontSize = 12.sp,
                                        color = Color.White
                                    )
                                ) {
                                    append("分")
                                }
                            }
                        )

                        Text(
                            text = "学年积分",
                            fontSize = 12.sp,
                            color = Color.White,
                        )
                    }
                }
            }

            item {
                Row(
                    horizontalArrangement = Arrangement.SpaceEvenly,
                    modifier = Modifier
                        .fillMaxWidth() // 填满父容器的宽度
                        .offset(y = (-40).dp) // 向上偏移 40dp
                ) {
                    Column() {
                        Text(
                            text = "${viewModel.totalPointOfYear}分",
                            fontSize = 16.sp,
                            color = Color.White,
                        )
                        Spacer(modifier = Modifier.height(2.dp)) // 添加一个小间距
                        Text(
                            text = "学年规定积分",
                            fontSize = 12.sp,
                            color = Color.White,
                        )
                    }
                    Spacer(modifier = Modifier.width(40.dp))  // 添加一个小间距
                    Column {
                        Text(
                            text = "${viewModel.totalPointOfYear - viewModel.pointOfYear}分",
                            fontSize = 16.sp,
                            color = Color.White,
                        )
                        Spacer(modifier = Modifier.height(2.dp))
                        Text(
                            text = "还差",
                            fontSize = 12.sp,
                            color = Color.White,
                        )
                    }
                }
            }

            //学习明细
            item {
                Column(
                    modifier = Modifier
                        .clip(
                            shape = RoundedCornerShape(
                                topStart = 16.dp,
                                topEnd = 16.dp
                            )
                        )
                        .fillMaxSize()
                        .background(Color.White)
                        .padding(top = 8.dp)
                        .padding(horizontal = 8.dp, vertical = 8.dp)
                ) {
                    Text(
                        text = "学习明细",
                        fontSize = 16.sp,
                        color = Color(0xff333333),
                        modifier = Modifier
                    )

                    Text(
                        text = "最近一周获得积分情况",
                        fontSize = 14.sp,
                        color = Color(0xff999999),
                        modifier = Modifier.padding(top = 6.dp)
                    )

                    Spacer(modifier = Modifier.height(22.dp))

                    //积分情况的折线图
                    // TODO: 实现折线图
                    ChartView(viewModel.pointOfWeek)
                    Spacer(modifier = Modifier.height(14.dp))
                    Row(Modifier.padding(horizontal = 1.dp)) {
                        viewModel.weeks.forEachIndexed { index, week ->
                            Text(
                                text = week,
                                fontSize = 12.sp,
                                textAlign = TextAlign.Center,
                                color = Color(0xff999999),
                                modifier = Modifier
                                    .weight(1f)

                            )
                        }

                    }

                    Spacer(
                        modifier = Modifier.height(
                            20.dp
                        )
                    )

                    //今日任务提醒
                    /* Row(
                         verticalAlignment = Alignment.CenterVertically,
                         modifier = Modifier
                             .fillMaxWidth()
                             .padding(horizontal = 8.dp)
                             .clip(RoundedCornerShape(4.dp))
                             .background(Color(0XFFF0F8FF))
                             .then(Modifier.padding(horizontal = 16.dp, vertical = 8.dp))
                     ) {
                         Text(
                             text = "今日获得0积分，快去完成下面任务吧",
                             fontSize = 14.sp,
                             textAlign = TextAlign.Start,
                             color = Color(0xFF149EE7)
                         )
                     }*/

                    Text(
                        text = viewModel.tips,
                        fontSize = 14.sp,
                        textAlign = TextAlign.Start,
                        color = Color(0xFF149EE7),
                        modifier = Modifier
                            .padding(vertical = 8.dp)
                            .clip(RoundedCornerShape(4.dp))
                            .background(Color(0x11149EE7))
                            .padding(8.dp)
                            .fillMaxWidth()

                    )

                    //每日任务列表
                    DailyTaskContent()
                }
            }
        }


    }
}
